<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@black-color:#2A2A2A;//黑色默认颜色
@white-colcr:#fff;//白色默认颜色
	.homeWrap{
		width:100%;
		//height:900px;
		position: relative;
	}
    .swiper-container {
		position: relative;		
        width: 100%;
		height: 100%;
	}
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: @white-colcr;
		height: 100%;
		position: relative;   
		display: flex;
		justify-content: center;
		align-items: center;  
    }
	.homeBg{
		width:100%;
		height:100%;
	}
	.homeOne{		
		div{
			// opacity:0;		
			position: absolute;
			left:8%;
			// bottom:12%;
			text-align:left;
			color:@white-colcr;			
			// overflow: hidden;
			h1{
				font-size:48px;
				line-height:56px;
				margin-bottom:14px;
				font-weight: normal;
			}
			p{
				font-size:18px;
				line-height:28px;
			}
			p:nth-child(4){		
				float:left;					
				text-align:center;
				width:220px;
				height:50px;
				line-height:50px;
				font-size:18px;
				background-color: @primary-color;
				border-radius: 100px;
				margin-top:20px;
				cursor: pointer;
			}
		}
	}
	.homeTwo{
		color:@black-color;		
		z-index: 1;
		.homeTwo-div{
			h1{
				font-size:44px;
				margin-top:80px;
				line-height: 56px;
				font-weight: normal;
			}
			p{
				font-size:18px;
				line-height:28px;
				margin-top:10px;				
			}
			display: inline-block;
			width:1000px;
			height:600px;
			position: absolute;
			top:50%;
			left:50%;
			margin-left:-500px;
			margin-top:-300px;
			background-color:rgba(255,255,255,0.7);
			ul{
				width:296px;
				// height:172px;
				margin-top:41px;				
				margin-left:154px;
				float: left;
				li{
					float:left;
					width:142px;
					height:172px;
					margin-right:6px;
					div{
						width:142px;
						height:118px;
						display:flex;
						justify-content: center;
						align-items: center;
						img{
							opacity:1;
							display: inline-block;						
							width:142px;
							height:118px;
						}
					}					
					span{
						display: inline-block;
						font-size:18px;
						margin-top:15px;
						line-height:24px;
					}
				}
				li:nth-child(4){
					margin-right:0;
				}
			}
			.img{
				float: left;
				width: 411px;
				height: 215px;
				margin-top: 88px;				
				background: url('../../images/homeicon_miss5.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	.homeThree{
		div{
			position: absolute;
			left:0;
			// top:15.7%;
			width:100%;
			text-align:center;
			color:@white-colcr;			
			p:nth-child(1){
				font-size:48px;
			}
			p:nth-child(2){
				font-size:18px;
				line-height:28px;				
				margin-top:10px;
			}
			p:nth-child(3){
				font-size:18px;
				line-height:28px;				
				margin-bottom:25px;
			}
			p:nth-child(4){
				color:@primary-color;
				font-size:30px;
				line-height:46px;
			}
		}
	}
	.homeFour{
		div{
			position: absolute;
			left:0;
			top:12.7%;
			width:100%;
			text-align:center;
			font-size:48px;
			color:@white-colcr;
		}
		ul{
			position: absolute;
			// top:37.25%;
			left:50%;
			margin-left:-600px;
			width:1200px;
			li{
				float:left;
				width:200px;
				margin-right:50px;
				img{
					width:200px;
					height:320px;
					background-color:@white-colcr;
					transition: all 0.1s ;
				}
				img:hover{
					// margin-top: -15px;
					transform: translateY(-10px);
					transition: all 0.1s ;
					box-shadow: 0 10px 40px 0 rgba(95,85,91,.8), 0 2px 4px 0 rgba(62,68,93,0.06);
				}
				p{				
					color:@white-colcr;					
				}
				p:nth-child(2){
					font-size:24px;
					line-height:24px;
					margin:40px 0 20px;
				}
				p:nth-child(3){
					font-size:16px;
					line-height:24px;
					text-align:justify;
				}
			}
			li:nth-child(5){
				margin-right:0px;
			}
			
		}
	}
	.homeFive{
		background: #4E5456;
		position: relative;
		.data{
			position: absolute;
			top:19%;
			left:0;
			width: 100%;
			.top{
				position: relative;				
				font-size: 44px;
				color: #fff;
				width: 1200px;
				margin: 0 auto;
				height: 62px;
				.searchdiv{
					position: absolute;
					top:13px;
					right: 0;
					width: 200px;
					line-height: 38px;
					height: 38px;
					border: 1px solid #B4BDC1;
					border-radius: 100px;
					overflow: hidden;
					background-color: #4E5456;
					z-index: 2;
					.btn{
						position: absolute;
						top:0;
						left: 0;
						width: 40px;
						height: 36px;
						line-height: 36px;
						z-index: 2;
						cursor: pointer;
						display: flex;
						justify-content: center;
						align-items: center;
						img{
							width: 16px;
							height: 16px;
							
						}
					}
					.ivu-input-wrapper{
						float: right;
						width: 160px;
						margin-top: -11px;
					}
				}
			}
			.con{
				position: relative;
				margin-top: 6%;
				.swiper-slide{
					position: relative;
					width: 202px;
					height: 365px;
					background: #FFFFFF;
					border: 1px solid #4A4A4A;
					border-radius: 4px;
					cursor: pointer;
					box-shadow: 2px 2px 4px 0 #4A4A4A;
					margin-right: 30px;
					margin-bottom: 30px;
					transition: all 0.1s;
					overflow: hidden;
					border-radius: 4px 4px 0 0;
					.topImg{
						position: absolute;					
						top:0;
						left:0;
						width: 200px;
						height: 320px;
						z-index: 2;
						.img{
							width: 200px;
							height: 320px;
							background-color: red;
							border-radius: 4px 4px 0 0;
							transform: scale(0.53);
							position: absolute;
							top:-78px;
							left:-49px;
							text-align: initial;
						}
						.topHover{
							position: absolute;
							top:0;
							left:0;
							width: 200px;
							height: 320px;
							z-index: 3;	
							background:rgba(0,0,0,0.6);
							border-radius: 4px 4px 0 0;
							text-align: center;
							padding-top:59px;
							display: none;		
							p{
								font-size: 14px;
								color: #FFFFFF;
								margin-bottom: 18px;
							}						
							img{
								width: 150px;
								height: 150px;
							}			
						}
					}
					.topImg:hover{
						.topHover{
							display: block;
						}
					}
					.bottomInfo{
						position: absolute;
						bottom:0;
						left:0;
						width: 100%;
						height: 43px;;
						padding: 0 12px;
						line-height: 43px;
						.name{
							width: 100px;
							white-space:nowrap;
							text-overflow:ellipsis;
							overflow:hidden;
							font-size: 14px;
							color: #686E71;
							font-weight: bold;
							float: left;
							text-align: left;
						}
						.number{
							float: right;
							font-size: 12px;
							color: #B4BDC1;
							img{
								width: 16px;
								height: 16px;
								vertical-align: sub;
								margin-right: 4px;
							}
						}
					}
				}
				.swiper-slide-active{
					transform: scale(1.15);
				}
				
			}
		}
		.footer{
			position: absolute;
			bottom:0;
			left:0;
		}
	}
	@keyframes a{0%{opacity:0;bottom:0%;}100%{opacity:1;bottom:12%;	}}//动画1
	@keyframes b{0%{width:0;height:0;opacity:0;}100%{width:142px;height:118px;opacity:1;}}//动画2
	@keyframes c{0%{margin-bottom:50px;opacity:0;}100%{margin-bottom:0px;opacity:1;}}//动画3
	@keyframes d{0%{opacity:0;top:30%;}100%{opacity:1;top:15.7%;}}//动画1	
	@keyframes e{0%{width:110%;height:110%;}100%{width:100%;height:100%;}}//动画1	
	//动画专用class
	.animation-a{animation: a 1.5s;animation-delay:0.8s;}
	.animation-b{animation: b 1s; animation-delay:0s;}
	.animation-c{animation: c 1.5s;}	
	.animation-d{animation: d 1.5s;animation-delay:0.8s;}
	//动画交互
	.animation-font1{opacity:0;bottom:0%;}
	.animation-font2{opacity:1;bottom:12%;transition: all 1s  0.8s;}
	.animation-imgone1{width: 110%;height: 110%;}	
	.animation-imgone2{width:100%;height:100%;transition: all 0.8s Linear;}
	//第二屏
	.animation-div1{
		height: 250px;
		top:32%;
	}
	.animation-div2{
		height: 600px;
		top:50%;
		transition: all 0.8s Linear;
	}
	//第三屏
	.animation-font3{opacity:0;top:30%;}
	.animation-font4{opacity:1;top:15.7%;transition: all 1s  0.8s;}
	//第四屏
	.animation-four1{
		top:50%;
	}
	.animation-four2{
		top:37.25%;
		transition: top 0.8s;
	}
	//按钮悬浮动画
	.animation-btn:hover{
		transform: translateY(5px);
		transition: all 0.1s ;
		box-shadow: 4px 4px 4px 0 rgba(241,100,115,0.21);
	}
	// 适配样式
	@media screen and (max-width: 1500px) {
		.homeOne{		
			div{
				// opacity:1;		
				position: absolute;
				left:4.4%;
				// bottom:12%;
				text-align:left;
				color:@white-colcr;			
				// overflow: hidden;
				h1{
					font-size:32px;
					line-height:44px;
					margin-bottom:10px;
				}
				p{
					font-size:16px;
					line-height:24px;
				}
				p:nth-child(4){		
					float:left;					
					text-align:center;
					width:220px;
					height:50px;
					line-height:50px;
					font-size:18px;
					background-color: @primary-color;
					border-radius: 100px;
					margin-top:20px;
					cursor: pointer;
				}
			}
		}
		.homeTwo{
			color:@black-color;		
			.homeTwo-div{
				h1{
					font-size:36px;
					margin-top:70px;
					line-height: 44px;
					font-weight: normal;
				}
				p{
					font-size:16px;
					line-height:28px;
					margin-top:10px;				
				}
				display: inline-block;
				width:800px;
				height:500px;
				position: absolute;
				top:50%;
				left:50%;
				margin-left:-400px;
				margin-top:-250px;
				background-color:rgba(255,255,255,0.7);
				ul{
					width:277px;
					margin-top:30px;				
					margin-left:97px;
					float: left;
					li{
						float:left;
						width:114px;
						height:127px;
						margin-right:34px;
						div{
							width:114px;
							height:94px;
							display:flex;
							justify-content: center;
							align-items: center;
							img{
								opacity:1;
								display: inline-block;						
								width:114px;
								height:94px;
							}
						}					
						span{
							display: inline-block;
							font-size:18px;
							margin-top:7px;
							line-height:24px;
						}
					}
					li:nth-child(2n+0){
						margin-right:0;
					}
				}
				.img{
					width: 329px;
					height: 172px;
					float: left;
					margin-top: 66px;
					background: url('../../images/homeicon_miss5.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
		.homeThree{
			div{
				position: absolute;
				left:0;
				// top:15.7%;
				width:100%;
				text-align:center;
				color:@white-colcr;			
				p:nth-child(1){
					font-size:32px;
				}
				p:nth-child(2){
					font-size:16px;
					line-height:24px;				
					margin-top:10px;
				}
				p:nth-child(3){
					font-size:16px;
					line-height:22px;				
					margin-bottom:0;
				}
				p:nth-child(4){
					color:@primary-color;
					font-size:20px;
					line-height:46px;
				}
			}
		}
		.homeFour{
			div{
				position: absolute;
				left:0;
				top:12.7%;
				width:100%;
				text-align:center;
				font-size:32px;
				color:@white-colcr;
			}
			ul{
				position: absolute;
				// top:31.25%;
				left:50%;
				margin-left:-450px;
				width:900px;
				li{
					float:left;
					width:160px;
					margin-right:25px;
					img{
						width:160px;
						height:255px;
						background-color:@white-colcr;
					}
					p{				
						color:@white-colcr;					
					}
					p:nth-child(2){
						font-size:20px;
						line-height:24px;
						margin:20px 0 14px;
					}
					p:nth-child(3){
						font-size:14px;
						line-height:20px;
						text-align:justify;
					}
				}
				li:nth-child(5){
					margin-right:0px;
				}
				
			}
		}
		.homeFive{
			.data{
			.top{
				font-size: 32px;
				.searchdiv{
					right:70px;
					.ivu-input-wrapper{
						margin-top: -7px;
					}
				}
			}
			.con{
				margin-top:3%;		
			}
			}
		}
	@keyframes b{0%{width:0;height:0;opacity:0;}100%{width:114px;height:94px;opacity:1;}}//动画2
	.animation-four1{
		top:45%;
	}
	.animation-four2{
		top:31.25%;
		transition: top 0.8s;
	}
	}


</style>
<style lang='less'>
	//首页样式	
	.homeSwiper-pagination{//导航点样式
		position: fixed;
		top:50%;
		right:20px;
		z-index:10;		
		.swiper-pagination-bullet{//导航点默认样式
			margin: 10px 0;
			display: block;
			width:8px;
			height:8px;
			background: rgba(255,255,255,0.60);
			border: 1px solid rgba(0,0,0,0.10);
		}
		.swiper-pagination-bullet-active{//导航点选中样式
			width:12px;
			height:12px;
			background: #FB9132;
			border: 1px solid #FFFFFF;
			margin-left: -2px;
		}
	}
	.homeFive{
		.ivu-input-wrapper{
			.ivu-input{
				border-radius: 100px;
				border:0;
				background: #4E5456;
				color:#B4BDC1;
			}
			.ivu-input:focus{
				outline:none;
				box-shadow:none;
			}
		}
		.swiper-container{
			overflow: visible;
		}
		.fiveSwiper-pagination{
			margin-top:36px;
			.swiper-pagination-bullet{
				width: 10px;
				height: 10px;
				background: #686E71;
				margin-right: 10px;
				opacity: 1;
			}
			.swiper-pagination-bullet-active{
				background: #FE9333;
			}
		}
		.fiveSwiper-next{
			position: absolute;
			top:50%;
			margin-top:-90px;
			right:0;
			width:40px;
			height:60px;
			background:url('../../images/home_banner5_next@2x.png') no-repeat;
			background-size:100% 100%;
			cursor: pointer;
			z-index:11;
		}
		.fiveSwiper-next:hover{
			background:url('../../images/home_banner5_next_hover@2x.png') no-repeat;
			background-size:100% 100%;
		}
		.fiveSwiper-prev{
			position: absolute;
			top:50%;
			margin-top:-90px;
			left:0;
			width:40px;
			height:60px;
			background:url('../../images/home_banner5_pre@2x.png') no-repeat;
			background-size:100% 100%;
			cursor: pointer;
			z-index:11;
		}
		.fiveSwiper-prev:hover{
			background:url('../../images/home_banner5_pre_hover@2x.png') no-repeat;
			background-size:100% 100%;
		}
	}
	
	
</style>
<template>
	<div class="homeWrap" :style="'height:'+windowHeight">
		<!--:login="loginflag" @loginbtnFN="loginbtnFN"-->
		<v-header :loginBack="loginBackFn"  ref="loginname"></v-header> 
		<swiper :options="homeSwiper" ref="abc">
			<swiper-slide class="homeOne">
				<img src="../../images/banner1.png" :class="bgImgOne">
				 <div :class="fontDh">
					<h1>生命的传记，记录人生点点滴滴</h1>		
					<p>让每个人都拥有生命的“传记”，记录人生的点点滴滴······让每个人的人生故事都得以更好地呈</br></p>		
					<p>现与传承，让爱“永恒”，让生“永续”······</p>
					<p @click="creadzj" class="animation-btn">立即创建</p>
				</div> 
			</swiper-slide>
			<swiper-slide class="homeTwo">
				<img src="../../images/banner2.png" class="homeBg">	
				<div :class="homeTwoDiv">
					<h1 :class="">随时随地追思缅怀</h1>
					<p :class="">无论身在何处，任何时间都可通过电脑端、手机移动端进行快速便捷的追思祭扫。</p>
					<ul class="clearfix">
						<li><div><img src="../../images/homeicon_miss1.png" alt="" :class="imgDh"></div><span>在陵园</span></li>
						<li><div><img src="../../images/homeicon_miss2.png" alt="" :class="imgDh"></div><span>在家</span></li>
						<li><div><img src="../../images/homeicon_miss3.png" alt="" :class="imgDh"></div><span>外出</span></li>
						<li><div><img src="../../images/homeicon_miss4.png" alt="" :class="imgDh"></div><span>工作</span></li>
					</ul>
					<div class="img">

					</div>
				</div>			
			</swiper-slide>
			<swiper-slide class="homeThree">
				<img src="../../images/banner3.png" :class="bgImgTwo">	
				<div :class="fontDh3">
					<p>精美人文纪念物及相片影视资料安全保存</p>
					<p>我们为逝者的家属提供一套人文纪念物；通过手机扫码呈现逝者生平简介、墓志铭、相片及视频影像资料；</p>
					<p>专业技术处理永久保真、独立管理、永不丢失；隐私权限设置，仅个人或亲友可见。</p>
					<p>人文纪念物，精湛唯美，浓缩逝者精彩人生。</p>
				</div>
			</swiper-slide>
			<swiper-slide class="homeFour">
				<img src="../../images/banner4.png" class="homeBg">	
				<div>
					人性化全方位服务</br>
					让您便捷高效地实现缅怀追思
				</div>
				<ul :class="fourDiv">
					<li><img src="../../images/homeicon_service1.png" alt=""><p>人物传记</p><p>海量模板提供选择，手机移动端进行便捷的追思祭扫</p></li>
					<li><img src="../../images/homeicon_service2.png" alt=""><p>亲友圈</p><p>添加亲友，随时互动；追思亲人传记，强化家人亲情</p></li>
					<li><img src="../../images/homeicon_service3.png" alt=""><p>家谱树</p><p>线上家谱，永久保存，家族关系一目了然</p></li>
					<li><img src="../../images/homeicon_service4.png" alt=""><p>祭扫商城</p><p>智能化获取穴位位置，安全、便捷高效送达，在线便捷支付</p></li>
					<li><img src="../../images/homeicon_service5.png" alt=""><p>增值服务</p><p>陵园预约、祭扫导航、诞辰、祭日智能化短信提醒</p></li>
				</ul>
			</swiper-slide>
			<swiper-slide class="homeFive" v-if="false">
				<!-- 传记内容 -->
				<div class="data">
					<!-- 标题 搜索框 -->
					<div class="top">
						平台人物传记展示
						<div class="searchdiv">
							<div class="btn" @click="serchBtn(keywords)"><img src="../../images/homesearch@2x.png"/></div>
							<Input v-model="keywords" @on-enter="serchBtn(keywords)" placeholder="请输入传记名称"></Input>
						</div>
					</div>
					<div class="con">
						<!-- Swiper -->
						<swiper :options="fiveSwiper" class="swiper-no-swiping">
							<swiper-slide v-for="item in listdata" class="swiper-no-swiping">
								<!-- 封面 -->
									<div class="topImg" @click="checkBiography(item.cemeteryId,item.template)">
										<div class="img">
											<div :style="item.IntroduceModule.headerStyle">
												<!--头像-->
												<div :style="item.IntroduceModule.moduleImageDivStyle"><img :src="hotsimg+item.IntroduceModule.cemeteryIntroduction.headPictureSource" style="width: 100%;height: 100%;"/></div>
												<!--姓名-->
												<div :style="item.IntroduceModule.nameStyle" ref="nameStyle">{{item.IntroduceModule.cemeteryIntroduction.userName}}</div>
												<!--出生日期-->
												<div :style="item.IntroduceModule.introductionDayStyle" ref="introductionStyle">{{birthdayTime(item.IntroduceModule.cemeteryIntroduction.birthDay)+birthDayAnd+birthdayTime(item.IntroduceModule.cemeteryIntroduction.deadDay)}}</div>
												<!--个人简介-->
												<div :style="item.IntroduceModule.introductionStyle" ref="introductionDayStyle">{{item.IntroduceModule.cemeteryIntroduction.introduction}}</div>			
												<v-edittext :textflag="item.IntroduceModule.templateModuleContent"></v-edittext>
												<img  :src="hotsimg+item1.picSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
												<img  :src="hotsimg+item1.videoPicSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
											</div>
										</div>
										<!-- hover 二维码 -->
										<div class="topHover">
											<p>手机扫一扫预览效果</p>
											<img :src="item.qrcodeImageUrl" />
										</div>
									</div>
									<!-- 名称和查看量 -->
									<div class="bottomInfo clearfix">
										<div class="name">{{item.userName}}</div>
									</div>
							</swiper-slide>
						</swiper>
						<!-- 导航点 -->
						<div class="fiveSwiper-pagination"></div>
						<!-- 左右箭头 -->
						<div @click.stop="" class="fiveSwiper-next"></div>
						<div class="fiveSwiper-prev"></div>
					</div>
				</div>
			</swiper-slide>
    	</swiper>
		<v-footer v-show="footerShow"></v-footer>				
		
		<!-- 导航点 -->		
    	<div class="homeSwiper-pagination"></div> 
	</div>
	
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'//引用swiper控件
	import global from '../../config/global'
    import { mapState } from 'vuex'
    export default {
		data() {
			return {
				staticimg:global.staticimg,
				hotsimg:global.imgurl,//图片前缀
				windowHeight:"",//当前浏览器高度
				fontDh2:"",//字体动画class name
				imgDh:"",//图片动画class name
				homeSwiper:{},//主页swiper
				loginflag:false,
				footerShow:false,
				bgImgOne:"animation-imgone1",//第一屏背景动画
				bgImgTwo:"animation-imgone1",//第三屏背景动画
				fontDh:"animation-font1",//第一屏字体动画
				homeTwoDiv:"homeTwo-div animation-div1",//第二屏DIV动画
				fontDh3:"animation-font3",//第三屏字体动画				
				fourDiv:"animation-four1",//第四屏幕DIV动画
				fiveSwiper:{},
				listdata:"",//第五屏传记列表
				keywords:"",//搜索传记绑定参数
			}
		},
		components: {
			swiper, swiperSlide
		},
		watch:{
			'$route':"Wheight",
			'$route':"swiperend"
		},
        computed: mapState({ user: state => state.user }),
		created(){//初始执行的方法
			this.Wheight();	
			this.ajax();
		},
		mounted(){
			var this_ = this;
			setTimeout(function(){
				this_.bgImgOne = "animation-imgone2";//第一屏背景放大动画
				this_.fontDh = "animation-font2";//第一屏字体动画	
			},0)
			this.swiperend();
			window.onresize=function(){//当浏览器改变宽高的时候 从新计算
				this_.Wheight();
			}	
		},
		methods:{
			checkBiography(cemeteryId,template){//查看人物传记
				this.$router.push({ path: '/publish',query:{"cemeteryId":cemeteryId,"template":template}});//跳转传记页面
			},
			ajax(){
				this.$http.get(global.host+'/cemeteryOwner/unsecured/open/lifebook')
				.then((response) => {
					this.listdata=response.body.result;
				})
				.catch(function (response) {
					
				})
			},
			Wheight(){//页面第一次加载执行使slide的高度和浏览器的可视区域高度一样
				var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				this.windowHeight = windowHeight+'px';		
			},			
			swiperend(){																		
				var _this=this;
				this.homeSwiper={//主页巨大Swiper		
					pagination: '.homeSwiper-pagination',
       				paginationClickable: true,			
        			direction: 'vertical',		
					mousewheelControl : true,		
					mousewheelReleaseOnEdges : true,//当Swiper处于边缘位置时（第一个或最后一个slide），Swiper释放鼠标滚轮事件，鼠标可以控制页面滚动
					onlyExternal : true,//禁止拖动					
					onSlideChangeStart(swiper){//切换swiper结束之后触发的函数
						if(swiper.activeIndex == 0){
							_this.bgImgOne = "animation-imgone2";//第一屏背景放大动画
							_this.fontDh = "animation-font2";//第一屏字体动画
							_this.homeTwoDiv = "homeTwo-div";//第二屏DIV动画
							_this.imgDh = "";	
							_this.fontDh2="";	
							_this.fontDh3="";		
							_this.footerShow = false;		
						}else if(swiper.activeIndex == 1){
							_this.bgImgOne = "animation-imgone1";//第一屏背景放大动画
							_this.fontDh = "animation-font1";//第一屏字体动画
							_this.homeTwoDiv = "homeTwo-div";//第二屏DIV动画
							_this.bgImgTwo = "animation-imgone1";
							_this.fontDh3="animation-font3";				
							_this.imgDh = "animation-b";
							_this.fontDh2 = "animation-c";
							_this.footerShow = false;							
						}else if(swiper.activeIndex == 2){
							_this.bgImgOne = "animation-imgone1";//第一屏背景放大动画
							_this.fontDh = "animation-font1";//第一屏字体动画
							_this.homeTwoDiv = "homeTwo-div";//第二屏DIV动画
							_this.bgImgTwo = "animation-imgone2";
							_this.fontDh3="animation-font4";
							_this.imgDh = "";
							_this.fontDh2="";
							_this.fourDiv = "animation-four1";
							_this.footerShow = false;
						}else if(swiper.activeIndex == 3){
							_this.bgImgOne = "animation-imgone1";//第一屏背景放大动画
							_this.fontDh = "animation-font1";//第一屏字体动画
							_this.homeTwoDiv = "homeTwo-div";//第二屏DIV动画
							_this.bgImgTwo = "animation-imgone1";
							_this.fourDiv = "animation-four2";
							_this.imgDh = "";
							_this.fontDh2="";
							_this.fontDh3="animation-font3";
							_this.footerShow = true;							
						}else if(swiper.activeIndex == 4){
							_this.bgImgOne = "animation-imgone1";//第一屏背景放大动画
							_this.fontDh = "animation-font1";//第一屏字体动画
							_this.homeTwoDiv = "homeTwo-div";//第二屏DIV动画
							_this.bgImgTwo = "animation-imgone1";
							_this.fourDiv = "animation-four2";
							_this.imgDh = "";
							_this.fontDh2="";
							_this.fontDh3="animation-font4";
							_this.footerShow = false;														
						}
					},
				}
				this.fiveSwiper={
					// loop: true,					
					scrollbarHide: false,
					slidesPerView: 'auto',
					centeredSlides: true,
					spaceBetween: 30,
					initialSlide :3,
					pagination: '.fiveSwiper-pagination',
					nextButton: '.fiveSwiper-next',
					prevButton: '.fiveSwiper-prev',
					paginationClickable: true,
				}
			},
			serchBtn(){
				this.$router.push({ path: '/homeShow' ,query:{"keyword":this.keywords}});//跳转传记页面
			},
			loginbtnFN(flag){
				this.loginflag=flag
			},
			creadzj(){
				this.$refs.loginname.loginbtn();
			},
			loginBackFn(){
				//alert("asfd") 
				return { path: '/home' };//跳转传记页面
			},
			birthdayTime(time){         
                function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(time));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				if(this.customized == 1){//判断是否需要中文
					y = this.Arabia(y);				
					m = this.Arabia2(m);				
					d = this.Arabia2(d);	
					this.birthDayAnd = " 至 ";
				    return y + '年' + add0(m) + '月' + add0(d) + '日';                    
				}else{
					this.birthDayAnd = " - ";
				    return y + '-' + add0(m) + '-' + add0(d) + '';
                }
            },
            Arabia(Num){
				for (var i = Num.length - 1; i >= 0; i--) {
					Num = Num.replace(",", "")//替换Num中的“,”
					Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				return newchar;
			},
			Arabia2(Num){				
				for (var　i = Num.length - 1; i >= 0; i--) {
						Num = Num.replace(",", "")//替换Num中的“,”
						Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (var i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						// case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					switch (part[0].length - i - 1) {
						case 0: tmpnewchar = tmpnewchar; break;
						case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 4: tmpnewchar = tmpnewchar + "万"; break;
						case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 8: tmpnewchar = tmpnewchar + "亿"; break;
						case 9: tmpnewchar = tmpnewchar + "十"; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				//替换所有无用汉字，直到没有此类无用的数字为止
				while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
					newchar = newchar.replace("零亿", "亿");
					newchar = newchar.replace("亿万", "亿");
					newchar = newchar.replace("零万", "万");
					newchar = newchar.replace("零零", "零");      
				}
				//替换以“一十”开头的，为“十”
				if (newchar.indexOf("一十") == 0) {
					newchar = newchar.substr(1);
				}
				//替换以“零”结尾的，为“”
				if (newchar.lastIndexOf("零") == newchar.length - 1) {
					newchar = newchar.substr(0, newchar.length - 1);
				}
				return newchar;
			}
		},
	

    }
</script>